<template>
  <div class="hello">
    <h1>hello</h1>
    <a href="#" class="aa">
      123123
      <b>bbbb</b>
    </a>
    <slot></slot>
    <ul>
      <li v-for="(item, index) in arr" :ref="setRef">{{ item }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  // props:['msg','msg'],
  props: {
    msg: {
      required: true,
      default() {
        return 123
      },
      type: Number
    }
  },
  setup(props){
    console.log(props)
    console.log(this)
  },
  data() {
    return {
      arr: ['写代码', '写项目', '改bug'],
      lis: [],
    }
  },
  // emits:['keke'],
  emits: {
    keke(arg) {
      //arg是$emits传递出去的数据
      console.log(arg)
      //触发keke这个方法的时候 必须传递数值类型的参数出去
      if (typeof arg !== 'number') {
        console.error('expected arg number but got string' + " arg")
        return false
      } else {
        return true
      }
    }
  },
  mounted() {
    // console.log(this.$refs.rr)
    console.log(this.lis)
    this.$emit('keke',999)
  },
  //vue3批量绑定的时候推荐我们将ref绑定到一个函数上
  methods: {
    setRef(item) {
      console.log(item.innerText)
      if (item.innerText === "写项目") {
        this.lis.push(item)
      }
    }
  }
}
</script>
<style scoped>
h1 {
  color: red
}

:slotted(fieldset) {
  color: green;
}
</style>